<template>
  <div class="echartsBox">
    <div id="everyDayTaskLine" class="allWidthHeight" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart2: null,
      value1: ''
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart2.resize()
    },
    /* 每日任务echarts */
    setEveryDayTaskLine(data) {
      const option = {
        grid: {
          left: '10%', // 距离左侧的距离
          right: '2%', // 距离右侧的距离
          top: '22%', // 距离顶部的距离
          bottom: '12%' // 距离底部的距离
        },
        legend: {
          data: ['任务量', '完成量'],
          right: '0',
          // left: '0',
          top: '0',
          // width: '100px',
          textStyle: {
            fontSize: '12px',
            color: '#fff' // 这里设置图例的字体颜色为红色
          },
          itemWidth: 10, // 设置图例标记的图形宽度
          itemHeight: 10 // 设置图例标记的图形高度
        },
        xAxis: [
          {
            splitLine: { show: false },
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              // 坐标轴 轴线
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: '{value}',
              interval: 0 // 代表显示所有x轴标签显示
            },
            axisTick: {
              show: false
            },
            type: 'category',
            data: ['王五', '李四', '张三', '王建', '王二', '李娟']
          }
        ],
        yAxis: [
          {
            // splitLine: { show: true },
            // axisLine: {
            //   show: false
            //   // 坐标轴 轴线
            // },
            axisLabel: {
              show: true,
              color: '#fff'
              // formatter: function (a) {
              //   return a
              // }
            },
            // axisTick: {
            //   show: false
            // },
            type: 'value'
          }
        ],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            name: '任务量',
            type: 'bar',
            data: [5200, 3000, 4000, 2000, 4500, 5500],
            itemStyle: { color: '#28CEAB' }
            // label: {
            //   show: true, // 显示数值
            //   position: 'top', // 在顶部显示
            //   color: '#fff'
            // }
          },
          {
            name: '完成量',
            type: 'bar',
            data: [5200, 1000, 2000, 3000, 3500, 2500],
            itemStyle: { color: '#217CE1' }
            // label: {
            //   show: true, // 显示数值
            //   position: 'top', // 在顶部显示
            //   color: '#fff'
            // }
          }
        ]
      }
      if (
        this.myChart2 != null &&
        this.myChart2 !== '' &&
        this.myChart2 !== undefined
      ) {
        this.myChart2.dispose() // 销毁
      }
      this.myChart2 = echarts.init(document.getElementById('everyDayTaskLine'))
      this.myChart2.clear()
      this.myChart2.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  padding: 0 15px;
  height: 100%;
}
</style>
